const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');


canvas.width = innerWidth;
canvas.height = innerHeight;

class Player {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }
    draw() {
        c.beginPath()
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        c.fillStyle = this.color
        c.fill()
    }
}
class Projectile {
    constructor(x, y, radius, color, velocity) {
        this.x = x
        this.y = y
        this.radius = radius
        this.color = color
        this.velocity = velocity
    }
    draw() {
        c.beginPath()
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        c.fillStyle = this.color
        c.fill()
    }
    update() {
        this.draw()
        this.x = this.x + this.velocity.x;
        this.y = this.y + this.velocity.y;
    }
}

class Enemy {
    constructor(x, y, radius, color, velocity) {
        this.x = x
        this.y = y
        this.radius = radius
        this.color = color
        this.velocity = velocity
    }
    draw() {
        c.beginPath()
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        c.fillStyle = this.color
        c.fill()
    }
    update() {
        this.draw()
        this.x = this.x + this.velocity.x;
        this.y = this.y + this.velocity.y;
    }
}


//the postion of player
const x = canvas.width / 2
const y = canvas.height / 2
const player = new Player(x, y, 30, 'blue')


function animate() {
    requestAnimationFrame(animate)
    c.clearRect(0, 0, canvas.width, canvas.height)
    player.draw()
    projectiles.forEach((projectile) => {
        projectile.update()
    });
    enemies.forEach((enemy, index) => {
        enemy.update()
        projectiles.forEach((projectile, projectileIndex) => {
            const dist = Math.hypot(projectile.x - enemy.x, projectile.y - projectile.y)
            //console.log(dist)
            //object touch

            if (dist - enemy.radius - projectile.radius < 1) {
                setTimeout(() => {
                    enemies.splice(index, 1)
                    projectiles.splice(projectileIndex, 2)
                })

            }
        })

    });

}

// const projectile1 = new Projectile(
//     canvas.width/2, canvas.height/2, 5,'red',
//     {
//         x:1,
//         y:1
//     }
// )
// projectile2 = new Projectile(
//     canvas.width/2, canvas.height/2, 5,'green',
//     {
//         x:-1,
//         y:-1
//     }
// )
// const projectiles = [projectile1, projectile2]
const projectiles = []
const enemies = [];
function spawnEnemies() {
    setInterval(() => {
        const radius = Math.random() * (30 - 4) + 4;

        let x;
        let y;
        if (Math.random() < 0.5) {
            x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius
            y = Math.random() * canvas.height;
        }
        else {

            x = Math.random() * canvas.width;
            y = Math.random() > 0.5 ? 0 - radius : canvas.height


        }

        const color = 'green';
        const angle = Math.atan2(player.y - y, player.x - x);
        const velocity = {
            x: Math.cos(angle),
            y: Math.sin(angle)
        }

        enemies.push(new Enemy(x, y, radius, color, velocity))

    }, 1000)
}

//creat a projectile when you click
window.addEventListener('click', (event) => {
    //animate()
    const angle = Math.atan2((event.clientY - player.y), (event.clientX - player.x))
    // console.log(angle)
    projectiles.push(
        new Projectile(
            player.x,
            player.y,
            3,
            'red',
            { x: Math.cos(angle), y: Math.sin(angle) },

        )
    )

}
)
animate()
spawnEnemies()
//console.log(canvas)

